import React, {lazy , Suspense,useEffect,useState} from 'react'
import { BrowserRouter , Routes , Route , Navigate} from 'react-router-dom'
import './moke/index'

const Login = lazy(()=> import('./view/login/Login') )
const Index = lazy(()=> import('./view/home/Home'))
const Table = lazy(()=> import('./components/table/table'))
const About = lazy(()=> import('./components/about/About'))
const Btn = lazy(()=> import('./components/btn/Btn'))
const Home = lazy(()=> import('./components/home/Home'))
const Icon = lazy(()=> import('./components/icon/Icon'))
const Text = lazy(()=> import('./components/text/Text'))
import './App.scss'

export default function App() {
    const [c,setc] = useState(0)

    useEffect(()=>{
        setc(1)
    })
    let paths = JSON.parse(localStorage.getItem('path')) || [] 
    //创建一个函数去返回满足条件的路由
    function surePath(params,ele) {
        // params 是路由的path,判断是否返回 满足条件就返回一个路由,不满足就返回一个空
        for (let i = 0; i < paths.length; i++) {
            const element = paths[i];
            if(params == element){
                switch (ele) {
                    case 'About':
                        ele = <About />
                        break;
                    case 'Btn':
                        ele = <Btn />
                        break;
                    case 'Home':
                        ele = <Home />
                        break;
                    case 'Icon':
                        ele = <Icon />
                        break;
                    case 'Text':
                        ele = <Text />
                        break;
                    case 'Table':
                        ele = <Table />
                        break;
                    default:
                        ele = <Home />
                        break;
                }
                return (
                    <Route path={params} element={ele}></Route>
                )
            }
        }
        return ( <></> )
    }
  return (
        <BrowserRouter key={c}>
            <Suspense>
                <Routes>
                    <Route path='/' element={ <Index /> }>
                        <Route path="/" element={<Navigate to="/home" replace />} />
                        {/* 这里的重定向都可以不写 直接配一个path是/或者是''的路由 他会自定进去  */}
                        {/* <Route path='about' element={<About />}></Route> */}
                        {surePath('/about','About')}
                        {/* <Route path='btn' element={<Btn />}></Route> */}
                        {surePath('/btn','Btn')}
                        <Route path='home' element={<Home />}></Route>
                        {/* <Route path='icon' element={<Icon />}></Route> */}
                        {surePath('/icon','Icon')}
                        {/* <Route path='text' element={<Text />}></Route> */}
                        {surePath('/text','Text')}
                        {surePath('/table','Table')}
                    </Route>
                    <Route path='/login' element={<Login />}></Route>
                </Routes>
            </Suspense>
        </BrowserRouter>
  )
}
